
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta charset='utf-8' />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type='text/css'>
	*{
		padding:0;
		margin:0;
	 }
	 body{
		 perspective:800px;
		 background:#272942;
	 }
	 p{
		color:#eee;
		font-family:'microsoft yahei';	
		font-size:20px;
		padding-top:90px;
		width:200px;
		text-align:center;
	 }
	.box_wrap{
		width:800px;
		height:600px;
		border:1px solid #BBB;	
		margin:50px auto 100px;
		position:relative;
		overflow:hidden;
		cursor:pointer;
		perspective:800px;
	}
	.sn-simple-logo{
		position:absolute;
	}
	.overflow{
		z-index:4;
	}
	#box_4_wrap,#box_8_wrap{
		z-index:3;
	}
	#box_9_wrap,#box_10_wrap,#box_11_wrap{
		z-index:2;
	}
	#box_12_wrap{
		z-index:1;
	}
	#box_1_wrap,#box_2_wrap,#box_3_wrap,
	#box_4_wrap,#box_5_wrap,#box_6_wrap,
	#box_7_wrap,#box_8_wrap,#box_9_wrap,
	#box_10_wrap,#box_11_wrap,#box_12_wrap,
	.box_1,.box_2,.box_3,.box_4,.box_5,.box_6,
	.box_7,.box_8,.box_9,.box_10,.box_11,.box_12,
	.box_1_face,.box_2_face,.box_3_face,
	.box_4_face,.box_5_face,.box_6_face,
	.box_7_face,.box_8_face,.box_9_face,
	.box_10_face,.box_11_face,.box_12_face,
	.box_1_back,.box_2_back,.box_3_back,
	.box_4_back,.box_5_back,.box_6_back,
	.box_7_back,.box_8_back,.box_9_back,
	.box_10_back,.box_11_back,.box_12_back{
		width:200px;
		height:200px;
		transform-style:preserve-3d;
		transition:.5s all ease-in-out;
	}
	#box_1_wrap{
		top:0;
		left:0;
	}
	#box_2_wrap{
		top:0;
		left:200px;
	}
	#box_3_wrap{
		top:0;
		left:400px;
	}
	#box_4_wrap{
		top:0;
		left:600px;
	}
	#box_5_wrap{
		top:200px;
		left:0;
	}
	#box_6_wrap{
		top:200px;
		left:200px;
	}
	#box_7_wrap{
		top:200px;
		left:400px;
	}
	#box_8_wrap{
		top:200px;
		left:600px;
	}
	#box_9_wrap{
		top:400px;
		left:0;
	}
	#box_10_wrap{
		top:400px;
		left:200px;
	}
	#box_11_wrap{
		top:400px;
		left:400px;
	}
	#box_12_wrap{
		top:400px;
		left:600px;
	}
	.box_1_face{
		background:url(image/1.jpg);
	}
	.box_2_face{
		background:url(image/2.jpg);
	}
	.box_3_face{
		background:url(image/3.jpg);
	}
	.box_4_face{
		background:url(image/4.jpg);
	}
	.box_5_face{
		background:url(image/5.jpg);
	}
	.box_6_face{
		background:url(image/6.jpg);
	}
	.box_7_face{
		background:url(image/7.jpg);
	}
	.box_8_face{
		background:url(image/8.jpg);
	}
	.box_9_face{
		background:url(image/9.jpg);
	}
	.box_10_face{
		background:url(image/10.jpg);
	}
	.box_11_face{
		background:url(image/11.jpg);
	}
	.box_12_face{
		background:url(image/12.jpg);
	}
	.box_1_back,.box_2_back,.box_3_back,
	.box_4_back,.box_5_back,.box_6_back,
	.box_7_back,.box_8_back,.box_9_back,
	.box_10_back,.box_11_back,.box_12_back{
		transform:rotateX(-90deg);
		transform-origin:50% 0;
	}
	.box_1_back{
		background:#ff9900;
	}
	.box_2_back{
		background:#9933ff;
	}
	.box_3_back{
		background:#009999;
	}
	.box_4_back{
		background:#00ff00;
	}
	.box_5_back{
		background:#ff0073;
	}
	.box_6_back{
		background:#33b8ff;
	}
	.box_7_back{
		background:#ffff00;
	}
	.box_8_back{
		background:#03584e;
	}
	.box_9_back{
		background:#339900;
	}
	.box_10_back{
		background:#f93939;
	}
	.box_11_back{
		background:#996600;
	}
	.box_12_back{
		background:#4a3c6a;
	}
	.box_1:hover,.box_2:hover,.box_3:hover,
	.box_4:hover,.box_5:hover,.box_6:hover,
	.box_7:hover,.box_8:hover,.box_9:hover,
	.box_10:hover,.box_11:hover,.box_12:hover
	{
		transform:rotateX(90deg);
		transform-origin:50% 50% -100px;
	}
  </style>
 </head>

 <body>
  <div class='box_wrap'>
		<div id='box_1_wrap' class='sn-simple-logo overflow'>
			<div class='box_1'>
				<div class='box_1_face'>
					<p>范冰冰</p>
				</div>
				<div class='box_1_back'>
					<p>听说我最美</p>
				</div>
			</div>
		</div>
		<div id='box_2_wrap' class='sn-simple-logo overflow'>
			<div class='box_2'>
				<div class='box_2_face'>
					<p>吴彦祖</p>
				</div>
				<div class='box_2_back'>
					<p>哦？</p>
				</div>
			</div>
		</div>
		<div id='box_3_wrap' class='sn-simple-logo overflow'>
			<div class='box_3'>
				<div class='box_3_face'>
					<p>Audrey Hepburn</p>
				</div>
				<div class='box_3_back'>
					<p>隔壁那位问过我吗</p>
				</div>
			</div>
		</div>
		<div id='box_4_wrap' class='sn-simple-logo overflow'>
			<div class='box_4'>
				<div class='box_4_face'>
					<p>刘德华</p>
				</div>
				<div class='box_4_back'>
					<p>给我一杯忘情水欧~</p>
				</div>
			</div>
		</div>
		<div id='box_5_wrap' class='sn-simple-logo overflow'>
			<div class='box_5'>
				<div class='box_5_face'>
					<p>梁朝伟</p>
				</div>
				<div class='box_5_back'>
					<p>兄弟你还是适合演戏</p>
				</div>
			</div>
		</div>
		<div id='box_6_wrap' class='sn-simple-logo overflow'>
			<div class='box_6'>
				<div class='box_6_face'>
					<p>周星驰</p>
				</div>
				<div class='box_6_back'>
					<p>吴孟达去哪了</p>
				</div>
			</div>
		</div>
		<div id='box_7_wrap' class='sn-simple-logo overflow'>
			<div class='box_7'>
				<div class='box_7_face'>
					<p>杨幂</p>
				</div>
				<div class='box_7_back'>
					<p>听说在隔壁车里</p>
				</div>
			</div>
		</div>
		<div id='box_8_wrap' class='sn-simple-logo overflow'>
			<div class='box_8'>
				<div class='box_8_face'>
					<p>赵文卓</p>
				</div>
				<div class='box_8_back'>
					<p>别瞎说我能打十个</p>
				</div>
			</div>
		</div>
		<div id='box_9_wrap' class='sn-simple-logo overflow'>
			<div class='box_9'>
				<div class='box_9_face'>
					<p>成龙</p>
				</div>
				<div class='box_9_back'>
					<p>我能被十个打</p>
				</div>
			</div>
		</div>
		<div  id='box_10_wrap' class='sn-simple-logo overflow'>
			<div class='box_10'>
				<div class='box_10_face'>
					<p>范文芳</p>
				</div>
				<div class='box_10_back'>
					<p>楼上那位有点逗</p>
				</div>
			</div>
		</div>
		<div id='box_11_wrap' class='sn-simple-logo overflow'>
			<div class='box_11'>
				<div class='box_11_face'>
					<p>户田惠梨香</p>
				</div>
				<div class='box_11_back'>
					<p>左边那位说得对</p>
				</div>
			</div>
		</div>
		<div id='box_12_wrap' class='sn-simple-logo overflow'>
			<div class='box_12'>
				<div class='box_12_face'>
					<p>陈冠希</p>
				</div>
				<div class='box_12_back'>
					<p>都别BB我拿相机了</p>
				</div>
			</div>
		</div>
  </div>
 </body>
</html>
